// 抽离组建计算的通用逻辑，方便导入到每个页面中
import store from "../../store";
import {mapActions, mapState} from "vuex";
import appConfig from "../../../api/appConfig";

export default {
    computed: {
        ...mapState('app', ['device', 'winSize', 'uniLeftMenuState'])
    },
    watch: {
        winSize(newVal, oldVal){
            this.cubeCal()
        }
    },
    data(){
        return {
            multiImgInfo: {
                width: 0,  // 两个正方形图片的合理大小
                maxWidthMobile: 0,  //125, 每个正方形超过这个值后应该被拉回来，用户自行调整的超参数
                maxWidthDesktop: 0,  // 每个正方形超过这个值后应该被拉回来
                imgSpace: 12,  // 图像间隔
                componentPadding: 80 * 2,  // 不同的容器自带的边框， 此项目里只有一种,
                componentPaddingMobile: 80,  // 手机版
                swiperWidth: 0,  // 通过refs获取的组建宽度
            },
            cubeCal(){
                // debugger
                this.multiImgInfo.swiperWidth = this.$refs.swiper.$el.offsetWidth
                if(this.uniLeftMenuState.matchLeftWindow === true){
                    this.multiImgInfo.width =
                        Math.round((this.multiImgInfo.swiperWidth - (this.multiImgInfo.swiperWidth * 0.3) - this.multiImgInfo.imgSpace) / 2)
                    if(this.multiImgInfo.maxWidthDesktop !== 0 && this.multiImgInfo.width > this.multiImgInfo.maxWidthDesktop){
                        this.multiImgInfo.width = this.multiImgInfo.maxWidthDesktop
                    }
                }else{
                    this.multiImgInfo.width =
                        Math.round((this.winSize.width - this.multiImgInfo.componentPaddingMobile - this.multiImgInfo.imgSpace) / 2)
                    if(this.multiImgInfo.maxWidthMobile !== 0 && this.multiImgInfo.width > this.multiImgInfo.maxWidthMobile){
                        this.multiImgInfo.width = this.multiImgInfo.maxWidthMobile
                    }
                }

            },
        }
    }
}
